import api from '../../../fetch/api'
import echarts from 'echarts'
// import echarts from '../../../assets/js/echarts.js'
console.log('echarts', echarts)

export default {
  data() {
    return {
      bigImgPath: ''
    }
  },
  mounted() {
    var self = this;
    var index_line = 0,
      index_heat = 0;
    for (var i = 0; i < 24; i++) {
      for (var k = 0; k < 60; k++) {
        self.tmp.xData_line[index_line] = i + ":" + (k < 10 ? "0" + k : k);
        index_line++;
      }
      for (var k = 0; k < 60; k = k + 10) {
        self.tmp.xData_heat[index_heat] = i + ":" + (k < 10 ? "0" + k : k);
        index_heat++;
      }
    }
    //var lineData = getLineDataSetting(self);
    //var heatData = getHeatDataSetting(self);
    //console.log('$("#ecLine")+++++$("#ecHeat")[0]', $("#ecLine")[0], $("#ecHeat")[0])

    self.lineChartObj = echarts.init($("#ecLine")[0], null, {
      renderer: 'canvas'
    });

    // self.lineChartObj.setOption(lineData);
    self.heatChartObj = echarts.init($("#ecHeat")[0], null, {
      renderer: 'canvas'
    });
    // self.heatChartObj.setOption(heatData);   
    self.lineChartObj.on('legendselectchanged', function (params) {
      var array = new Array();
      $.each(params['selected'], function (key, val) {
        array.push(val);
      });
      self.heatChart.tableShow = array;
    });
  },
  created() {

  },
  methods: {
    getList() {
      let params = $.extend({}, this.searchParams, this.otherParams);
      this.getItemList(params);
    },
    showBigImgModal(name, path) {
      this.bigImgPath = path;
      this.toOpenImgModal(name, path);
    },
    //获取列表
    getItemList(aparams) {
      var url = '';
      let self = this,
        params = {
          dimension: 'day'
        };
      params = $.extend({}, params, aparams);
      if (!params.parkId) {
        self.showToast('请先选择停车场');
        return;
      }
      if (params.dimension == 'day') {
        if (!params.date) {
          self.showToast('请先选择日期');
          return;
        }
        params.type = 'total';
        params.format = 'YYYY-MM-DD';
        // params.parkId = 3453;
        url = '/park/parkingStatistic/dayStatistic.do';
      } else {
        if (!params.yearMonth) {
          self.showToast('请先选择日期');
          return;
        }
        params.type = 'total';
        params.format = 'YYYY-MM';
        // params.parkId = 3453;
        url = '/park/parkingStatistic/monthStatistic.do';
      }
      switchChartDiv(self, params.dimension);
      api.fetchGet(url, params)
        .then(res => {
          // console.log('getListResult', res, self)
          if (params.dimension == 'day') {
            getLineChartDataCallback(res, self)
          } else {
            getHeatChartDataCallback(res, self)
          }
        }, err => {

        })
    },
    handleSearchChange(item) {
      // console.log("执行了change事件", item)
      switch (item.name) {
        case 'dimension':
          this.changeReportDimension(item);
          break;
      }
    },
    changeReportDimension(item) {
      var self = this;

      var today = [new Date(moment().format('YYYY-MM-DD'))];
      let value = item.value,
        ThisSearchItem = this.searchList[0];

      switch (value) {
        case 'day':
          ThisSearchItem.name = 'date', ThisSearchItem.type = 'datePicker';
          ThisSearchItem.flag = 'date', ThisSearchItem.value = today.toString();
          break;
        case 'month':
          ThisSearchItem.name = 'yearMonth', ThisSearchItem.type = 'datePicker';
          ThisSearchItem.flag = 'month', ThisSearchItem.value = today.toString();
          break;
      }
      //ThisSearchItem.value = '';
    },
  }
}

//获取折线图回调
function getLineChartDataCallback(r, vm) {
  var data = getLineDataSetting(vm, r);
  console.log('data:',JSON.stringify(data))
  if (data != null) {
    vm.lineChartObj.clear();
    vm.lineChartObj.setOption(data);
    vm.lineChartObj.resize();
  }
}

//获取热图回调
function getHeatChartDataCallback(r, vm) {
  var data = getHeatDataSetting(vm, r);
  if (data != null) {
    vm.heatChartObj.clear();
    vm.heatChartObj.setOption(data);
    vm.heatChartObj.resize();
  }
}



function getLineDataSetting(vm, lineData) {
  console.log('返回值-折线图');
  console.log(lineData);
  var xData = vm.tmp.xData_line,
    data = {},
    yAxis;

  if (!lineData) {
    var valData = new Array();
    for (var i = 0; i < 60 * 24; i++) {
      valData[i] = 0;
    }
    data['title'] = "请先选择停车场";
    data['total'] = valData;
    data['temp'] = valData;
    data['fixed'] = valData;
    data['leased'] = valData;
    data['free'] = valData;
    data['booked'] = valData;
    vm.rowList = [];
    yAxis = [{
      name: '剩余车位',
      type: 'value',
      min: 0,
      max: 100
    }];
  } else if (lineData.status == 1) {
    data['title'] = lineData.data['title'] + "剩余车位数";
    var dataList = lineData.data.dataList;
    if (dataList.length == 0) {
      var valData = new Array();
      for (var i = 0; i < 60 * 24; i++) {
        valData[i] = 0;
      }
      data['total'] = valData;
      data['temp'] = valData;
      data['fixed'] = valData;
      data['leased'] = valData;
      data['free'] = valData;
      data['booked'] = valData;
      yAxis = [{
        name: '剩余车位',
        type: 'value',
        min: 0,
        max: 100
      }];
    } else {
      data['total'] = dataList[0].data;
      data['temp'] = dataList[1].data;
      data['fixed'] = dataList[2].data;
      data['leased'] = dataList[3].data;
      data['free'] = dataList[4].data;
      data['booked'] = dataList[5].data;
      yAxis = [{
        name: '剩余车位',
        type: 'value'
      }];
    }
    var parkInfo = lineData.data.parkInfo;
    if (!parkInfo) {
      vm.rowList = [];
    } else {
      vm.rowList = [{
        "parkName": parkInfo.parkName,
        'totalNum': parkInfo.totalNum,
        'tempNum': parkInfo.tempNum,
        'fixedNum': parkInfo.fixedNum,
        'leasedNum': parkInfo.leasedNum,
        'freeNum': parkInfo.freeNum,
        'bookedNum': parkInfo.bookedNum
      }]
    }

  } else {
    vm.showToast('暂无图表数据！', 2);
    var data3 = getLineDataSetting(vm);
    // vm.rowList=[];
    return data3;
  }
  var lineChartData = {
    title: {
      left: 'center',
      top: '20',
      text: data['title'],
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['总车位', '临时车位', '固定车位', '租用车位', '免费车位', '预定车位']
    },
    toolbox: {
      show: true,
      right: '10%',
      top: '5%',
      feature: {
        dataZoom: {
          show: true
        },
        saveAsImage: {
          show: true
        }
      }
    },
    grid: {
      show: false,
      // left: '3%',
      // right: '4%',
      // bottom: '3%',
      // containLabel: true
    },
    xAxis: [{
      name: "时间",
      nameLocation: 'end',
      type: 'category',
      boundaryGap: false,
      data: xData,
      axisTick: {
        interval: 60 * 2 - 1
      },
      axisLabel: {
        interval: 60 * 2 - 1
      }
    }],
    yAxis: yAxis,
    series: [{
        name: '总车位',
        type: 'line',
        label: {
          normal: {
            show: true,
            position: 'top'
          }
        },
        smooth: true,
        symbol: 'none',
        sampling: 'average',
        areaStyle: {
          normal: {}
        },
        data: data['total']
      },
      {
        name: '临时车位',
        type: 'line',
        smooth: true,
        symbol: 'none',
        sampling: 'average',
        areaStyle: {
          normal: {}
        },
        data: data['temp']
      },
      {
        name: '固定车位',
        type: 'line',
        smooth: true,
        symbol: 'none',
        sampling: 'average',
        areaStyle: {
          normal: {}
        },
        data: data['fixed']
      },
      {
        name: '租用车位',
        type: 'line',
        smooth: true,
        symbol: 'none',
        sampling: 'average',
        areaStyle: {
          normal: {}
        },
        data: data['leased']
      },
      {
        name: '免费车位',
        type: 'line',
        smooth: true,
        symbol: 'none',
        sampling: 'average',
        areaStyle: {
          normal: {}
        },
        data: data['free']
      },
      {
        name: '预定车位',
        type: 'line',
        smooth: true,
        symbol: 'none',
        sampling: 'average',
        areaStyle: {
          normal: {}
        },
        data: data['booked']
      }
    ]
  };
  return lineChartData;
}

function getHeatDataSetting(vm, heatData) {
  console.log('返回值-热图');
  console.log(heatData);
  var xData = vm.tmp.xData_heat,
    yData = new Array(),
    data = new Array(),
    title;

  if (!heatData) {
    var heatData = new Array();
    title = "请先选择停车场";

    vm.rowList = [];
  } else if (heatData.status == 1) {
    for (var j = 0; j < heatData.data.days; j++) {
      yData[j] = (j + 1) + '日';
    }

    data = heatData.data['dataList'];
    title = heatData.data['title'] + "车位使用率";
    var parkInfo = heatData.data['parkInfo'];
    if (!parkInfo) {
      vm.rowList = [];
    } else {
      vm.rowList = [{
        "parkName": parkInfo.parkName,
        'totalNum': parkInfo.totalNum,
        'tempNum': parkInfo.tempNum,
        'fixedNum': parkInfo.fixedNum,
        'leasedNum': parkInfo.leasedNum,
        'freeNum': parkInfo.freeNum,
        'bookedNum': parkInfo.bookedNum
      }];
    }

  } else {
    self.showToast('暂无图表数据！', 2);
    var data3 = getHeatDataSetting(vm);
    // vm.rowList=[];
    return data3;
  }
  // console.log(title);
  // console.log(yData);
  // console.log(data);

  var heatChartData = {
    title: {
      x: 'center',
      text: title,
    },
    tooltip: {
      position: 'right',
      formatter: function (params, ticket, callback) {
        return (params.data[1] + 1) + "日," + params.name + ",使用率:" + params.data[2] + "%";
      }
    },
    toolbox: {
      show: true,
      right: '10%',
      top: '1%',
      feature: {
        // dataZoom: { show: true },
        saveAsImage: {
          show: true
        }
      }
    },
    animation: false,
    grid: {
      show: false,
      height: '380'
    },
    xAxis: {
      name: "时间",
      nameLocation: 'end',
      type: 'category',
      data: xData,
      splitArea: {
        show: true
      },
      axisTick: {
        interval: 11
      },
      axisLabel: {
        interval: 11
      },
      // visualMap: false,
    },
    yAxis: {
      name: "日期",
      nameLocation: 'end',
      type: 'category',
      data: yData,
      splitArea: {
        show: true
      },
      axisLabel: {
        interval: 0
      },
      axisTick: {
        interval: 0
      }
    },
    visualMap: {
      type: 'continuous',
      min: 0,
      max: 100,
      text: ['高', '低'],
      realtime: false,
      calculable: true,
      hoverLink: true,
      inRange: {
        // color: ['green','yellow','red'],
        color: ['#0aa07e', '#1fbd47', '#30d41b', '#8cfe01', '#fef800', '#ff0000'],
      },
      x: 'right',
      y: 'top',
    },
    series: [{
      name: '使用率',
      type: 'heatmap',
      data: data,
      label: {
        normal: {
          show: false
        }
      },
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  };
  return heatChartData;
}

//切换图标共用方法
function switchChartDiv(vm, type) {
  var dataStr = getTodayYMD();
  if (type == "month") {
    vm.heatChart.tableShow = [false, false, false, false, false, false];
    vm.heatChart.currentMark = 0;
    vm.heatChart.show = true;
    vm.lineChart.show = false;
    // if (vm.compoundSearchModel.yearMonth == "") {
    //     vm.compoundSearchModel.yearMonth = dataStr[0] + '-' + dataStr[1];
    // }
  } else {
    // vm.lineChart.tableShow = [true, true, true, true, true, true];
    // vm.lineChart.currentMark = 6;
    vm.heatChart.tableShow = [true, true, true, true, true, true];
    vm.heatChart.currentMark = 6;
    vm.lineChart.show = true;
    vm.heatChart.show = false;
    // if (vm.compoundSearchModel.date == "") {
    //     vm.compoundSearchModel.date = dataStr[0] + '-' + dataStr[1] + '-' + dataStr[2];
    // }
  }

}

//获取今天的时间数组
function getTodayYMD() {
  var yMd = [],
    date = new Date();
  var y = date.getFullYear(),
    m = date.getMonth() + 1,
    d = date.getDate(),
    num = new Date(y, m, 0).getDate();
  if (Number(m) < 10) {
    m = "0" + m;
  }
  if (Number(d) < 10) {
    d = "0" + d;
  }
  yMd.push(y);
  yMd.push(m);
  yMd.push(d);
  yMd.push(num);
  return yMd;
}
